<template>
  <span>{{ oldCount | thousandSeparate }}</span>
</template>

<script>
export default {
  props: ["count"],
  watch: {
    count: {
      handler(val) {
        this.newCount = Number(val.to) || 0;
        this.oldCount = Number(val.from) || 0;
        let step = (this.newCount - this.oldCount) / 40;
        let i = 0;
        this.setCount(i, step);
      },
      immediate: true
    }
  },
  data() {
    return {
      newCount: 0,
      oldCount: 0
    };
  },
  methods: {
    setCount(i, step) {
      i++;
      setTimeout(() => {
        this.oldCount = Number(this.oldCount) + Number(step);
        this.oldCount = Number(this.oldCount.toFixed(3));
        if (Number(step) > 0) {
          if (this.oldCount >= this.newCount) {
            this.oldCount = this.newCount;
          }
          if (this.oldCount < this.newCount) {
            this.setCount(i, step);
          }
        } else {
          if (this.oldCount <= this.newCount) {
            this.oldCount = this.newCount;
          }
          if (this.oldCount > this.newCount) {
            this.setCount(i, step);
          }
        }
      }, 20);
    }
  },
  mounted() {}
};
</script>

<style>
</style>